<template>
    <div class="fitness-record">
      <el-card>
        <!-- 搜索栏 -->
        <el-form :inline="true" class="search-form">
          <el-form-item label="用户名">
            <el-input v-model="searchParams.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="项目名称">
            <el-input v-model="searchParams.projectName" placeholder="请输入项目名称"></el-input>
          </el-form-item>
          <!-- <el-form-item label="测试日期">
            <el-date-picker
              v-model="searchParams.testDate"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>-->
          <el-form-item> 
            <el-button type="primary" @click="searchRecords">搜索</el-button>
          </el-form-item>
        </el-form>
  
        <!-- 添加记录按钮
        <el-button type="primary" @click="openAddRecordDialog">添加记录</el-button> -->
  
        <!-- 记录列表 -->
        <el-table :data="recordList" style="width: 100%" class="record-table" v-loading="loading">
          <el-table-column prop="userName" label="用户名"></el-table-column>
          <el-table-column prop="projectName" label="项目名称"></el-table-column>
          <el-table-column prop="score" label="成绩"></el-table-column>
          <!-- <el-table-column prop="grade" label="成绩等级"></el-table-column> -->
          <el-table-column prop="testDate" label="测试日期"></el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <!-- <el-button type="text" @click="editRecord(scope.row)">编辑</el-button> -->
              <el-button type="text" @click="deleteRecord(scope.row.recordId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
  
        <!-- 分页 -->
        <el-pagination
          class="pagination"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          @current-change="handlePageChange"
        ></el-pagination>
      </el-card>
  
      <!-- 添加/编辑记录对话框 -->
      <el-dialog :title="dialogTitle" v-model="dialogVisible">
        <el-form :model="recordForm">
          <el-form-item label="用户名">
            <el-select v-model="recordForm.user_id">
              <el-option
                v-for="user in userList"
                :key="user.user_id"
                :label="user.username"
                :value="user.user_id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目名称">
            <el-select v-model="recordForm.project_id">
              <el-option
                v-for="project in projectList"
                :key="project.project_id"
                :label="project.projectName"
                :value="project.project_id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="成绩">
            <el-input v-model="recordForm.score"></el-input>
          </el-form-item>
          <el-form-item label="测试日期">
            <el-date-picker v-model="recordForm.testDate" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveRecord">保存</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { getFitnessRecordList, addFitnessRecord, updateFitnessRecord, deleteFitnessRecord } from '@/api/fitnessRecord'
 import { fetchUserList } from '@/api/user'
  import { getFitnessProjectList } from '@/api/fitnessProject'
  
  export default {
    data() {
      return {
        searchParams: { username: '', projectName: '', testDate: '' },
        recordList: [],
        userList: [],
        projectList: [],
        currentPage: 1,
        pageSize: 10,
        total: 0,
        loading: false,
        dialogVisible: false,
        dialogTitle: '添加记录',
        recordForm: {
          user_id: '',
          project_id: '',
          score: '',
          testDate: ''
        }
      }
    },
    created() {
      this.fetchRecords()
      this.fetchUsers()
      this.fetchProjects()
    },
    methods: {
      async fetchRecords() {
        this.loading = true
        try {
          const response = await getFitnessRecordList({
            page: this.currentPage,
            size: this.pageSize,
            ...this.searchParams
          })
          this.recordList = response.data.records
          this.total = response.total
        } catch (error) {
          this.$message.error('获取记录列表失败')
        } finally {
          this.loading = false
        }
      },
      async fetchUsers() {
        try {
          const response = await fetchUserList()
          this.userList = response.data
        } catch (error) {
          this.$message.error('获取用户列表失败')
        }
      },
      async fetchProjects() {
        try {
          const response = await getFitnessProjectList()
          this.projectList = response.data.records
        } catch (error) {
          this.$message.error('获取项目列表失败')
        }
      },
      searchRecords() {
        this.currentPage = 1
        this.fetchRecords()
      },
      openAddRecordDialog() {
        this.dialogTitle = '添加记录'
        this.recordForm = {}
        this.dialogVisible = true
      },
      editRecord(record) {
        this.dialogTitle = '编辑记录'
        this.recordForm = { ...record }
        this.dialogVisible = true
      },
      async saveRecord() {
        try {
          if (this.recordForm.record_id) {
            await updateFitnessRecord(this.recordForm)
          } else {
            await addFitnessRecord(this.recordForm)
          }
          this.$message.success('保存成功')
          this.dialogVisible = false
          this.fetchRecords()
        } catch (error) {
          this.$message.error('保存失败')
        }
      },
      async deleteRecord(recordId) {
        try {
          await deleteFitnessRecord(recordId)
          this.$message.success('删除成功')
          this.fetchRecords()
        } catch (error) {
          this.$message.error('删除失败')
        }
      },
      handlePageChange(page) {
        this.currentPage = page
        this.fetchRecords()
      }
    }
  }
  </script>
  <style scoped>
  .fitness-record {
    padding: 20px;
  }
  .search-form {
    margin-bottom: 20px;
  }
  .record-table {
    margin-top: 20px;
  }
  .pagination {
    margin-top: 20px;
    text-align: right;
  }
  </style>